<template>
  <view class="store-bar-box">
    <view
      class="store-bar"
      @click="showStoreList"
    >
      <uni-icons
        type="location"
        color="#333"
        :size="18"
      />
      <div class="store-name">
        {{ storeVo.storeName }}
      </div>
      <uni-icons
        v-if="storeList.length"
        type="bottom"
        color="#333"
        :size="12"
      />
    </view>
    <uni-popup
      ref="popup"
      type="bottom"
      background-color="#fff"
      @change="hideModal"
    >
      <view class="modal-container">
        <div class="title">
          {{ appName }}
        </div>
        <scroll-view
          scroll-y
          class="scroll"
          style="height: 900rpx;"
        >
          <div class="tips">
            当前门店
          </div>
          <div
            v-for="(item,index) in storeList"
            :key="index"
            :class="['store-item',{ 'first': index === 0 }]"
          >
            <div class="name-bar">
              <div class="store-name">
                {{ item.storeName }}
              </div>
              <div class="button-group">
                <div
                  class="button"
                  @click="switchStore(item)"
                >
                  进入
                </div>
                <div
                  class="button"
                  @click="openLocation(item)"
                >
                  导航
                </div>
              </div>
            </div>
            <div class="address">
              {{ item.storeAddressDetail }}
            </div>
            <div class="info-bar">
              <div class="time">
                <span v-if="item.startTime && item.endTime">
                  营业时间：{{ item.startTime }}-{{ item.endTime }}
                </span>
                <span v-else>
                  营业时间：暂无
                </span>
              </div>
              <div class="distance">
                {{ item.storeDist }}KM
              </div>
            </div>
          </div>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>
<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { useStore } from '../../store';
import { ref, computed } from 'vue';

const store = useStore()

const storeList = computed(() => {
  return store.state.storeList
})

const storeVo = computed(() => {
  return store.state.storeVo
})

const appName = __wxConfig.accountInfo.nickname;

const popup = ref()

const emit = defineEmits(['show', 'switchStore']);

onLoad(() => {
  console.log(store)
})

const showStoreList = () => {
  if (storeList.value.length) {
    popup.value.open();
    uni.hideTabBar();
    emit('show')
  }
}

const hideModal = (e:any) => {
  console.log(e)
  if (!e.show) {
    setTimeout(() => {
      uni.showTabBar();
    }, 300)
  }
}

const switchStore = (storeVo:StoreVo) => {
  popup.value.close();
  emit('switchStore', storeVo)
}
</script>
<style lang="scss">
.modal-container {
    width: 100%;
    height: 100%;
    background-color: white;
    padding: 0 20px;
    box-sizing: border-box;
    .title {
        text-align: center;
        font-size: 18px;
        color: $uni-text-color;
        font-weight: 500;
        line-height: 65px;
    }
    .tips {
        font-size: 14px;
        font-weight: 400;
        text-align: left;
        color: $uni-text-color;
        line-height: 20px;
    }
    .scroll {
      ::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
        color: transparent;
        background: transparent;
      }
    }
    .store-item {
        padding: 20px 0 10px 0;
        &.first {
            padding: 10px 0 20px 0;
            border-bottom: 1px solid #f1f1f1;
        }
        .name-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .store-name {
                max-width: 192px;
                font-size: 16px;
                font-weight: 500;
                text-align: left;
                color: #3a3a3a;
                line-height: 24px;

            }
            .button-group {
                display: flex;
                justify-content: flex-end;
                .button {
                    padding: 0 12px;
                    line-height: 28px;
                    background: $uni-color-primary;
                    border: none;
                    outline: none;
                    text-align: center;
                    margin-left: 10px;
                    color: white;
                    font-size: 14px;
                    border-radius: 4px
                }
            }
        }
        .address {
            margin-top: 8px;
            font-size: 12px;
            font-weight: 400;
            text-align: left;
            color: #666666;
            line-height: 17px;
        }
        .info-bar {
            margin-top: 2px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 12px;
            text-align: left;
            color: #666666;
            line-height: 17px;
            .distance {
                color: $uni-text-color;
            }
        }
    }
}

.store-bar-box {
  margin-top: -5px;
  background: white;
}

.store-bar {
    background: white;
    display: inline-flex;
    align-items: center;
    padding: 5px 14px 8px;
    .store-name {
        font-size: 16px;
        color: $uni-color-primary;
        line-height: 21px;
        max-width: 180px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis;
        margin: 0 2px 0 5px;
    }
    img {
        width: 100%;
        height: 100%;
        display: block;
    }
}

.modal-container::before {
    content:'';
    display:table;
}
</style>
